<template>
	<view class="theme_bg_vice_color">
		<z-paging ref="paging" v-model="dataList" fixed @query="queryList">
			<view slot="top" class="theme_bg_color">
				<cu-custom id="nav" :isBack="true" :backColor="'text-black'">
					<block slot="backText"><view class="text-black ">可玩商家</view></block>
				</cu-custom>

				<van-search v-if="id==''" :value="search" placeholder="请输入搜索关键词" @search="searchBusiness" />
			</view>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
			<view class="grarg theme_bg_vice_color">
				<view class="cu-card">
					<view @click="go(item.id)" class="margin-lr radius12 shadow padding-sm margin-tb-sm theme_bg_color"
						style="position: relative;" v-for="(item,index) in dataList"
						:key="index">
						<view class="flex justify-start">
							<image :src="$isHttp(item.picture)" lazy-load
								style="width: 120rpx;height: 120rpx;border-radius: 10rpx;" mode="aspectFill"></image>
							<view class=" margin-left-sm" style="width: 520rpx;">
								<view class="flex justify-between margin-top-xs">
									<view class="text-bold text-lg text-black">{{item.StoreName}}</view>
									<view class="sm text-black" v-if="id==''">{{item.distance==''?'':item.distance+'km'}}</view>
								</view>
								<view class="margin-top-sm text-gray text-sm">
									{{item.region}}{{item.address}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin';
export default {
	//注意这一步不要漏掉，必须注册mixins(如果全局引入了，就不要这一步，全局引入示例见main.js)
	mixins: [ZPagingMixin],
	data() {
		return {
			dataList: [],
			search: '',
			id:''
		};
	},
	onLoad(option) {
		if(option.id2){
			this.id=option.id2
			return
		}
		this.$u.vuex('vuex_userCarId',option.id)
	},
	onUnload() {
		this.$u.vuex('vuex_userCarId',-1)
	},
	methods: {
		go(id){
			if(this.id==''){
				this.$goPage('/pageB/me/DiamondCard/PlayableList?id='+id)
			}else{
				// this.$goPage('/pageB/bussiness/info?id='+id)
			}
		},
		searchBusiness(e) {
			this.search = e.detail;
			this.$refs.paging.reload();
		},
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			//模拟请求服务器获取分页数据，请替换成自己的网络请求
			if(this.id===''){
				
			
			this.$u.api
				.getStores({
					userCarId: this.vuex_userCarId,
					page: pageNo,
					number: pageSize,
					longitude: this.vuex_longitude,
					latitude: this.vuex_latitude
				})
				.then(res => {
					if (res.code === 200) {
						this.$refs.paging.complete(res.data);
					}
				});
			}else{
			this.$u.api
				.activeStoreList({
					activeId: this.id,
					page: pageNo,
					number: pageSize,
					city: this.vuex_city
				})
				.then(res => {
					if (res.code === 200) {
						this.$refs.paging.complete(res.data);
					}
				});
				
				}
		}
	}
};
</script>

<style lang="scss" scoped>
.zuanshika {
	width: 690rpx;
	height: auto;
	background-image: linear-gradient(to right, #2a2a2c, #4e5052);
	margin: 20rpx auto;
	border-radius: 12rpx;
	color: #f8dab0;
}
.item {
	position: relative;
	height: 150rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0rpx 30rpx;
}

.item-detail {
	padding: 5rpx 15rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	color: white;
	background-color: #007aff;
}

.item-line {
	position: absolute;
	bottom: 0rpx;
	left: 0rpx;
	height: 1px;
	width: 100%;
	background-color: #eeeeee;
}
</style>
